<template>
  <!-- 底部部分 -->
  <footer class="footer">
    <span class="todo-count">剩余<strong>{{leftCount}}</strong></span>
    <ul class="filters" @click="$emit('changeType',type)">
      <li>
        <a @click.prevent="type='all'" :class="{selected:type==='all'}" href="#/">全部</a>
      </li>
      <li>
        <a @click.prevent="type='no'" :class="{selected:type==='no'}" href="#/active">进行中</a>
      </li>
      <li>
        <a @click.prevent="type='yes'" :class="{selected:type==='yes'}" href="#/completed">已完成</a>
      </li>
    </ul>
    <button @click="hClear" v-show="showClear"  class="clear-completed">清除已完成</button>
  </footer>
</template>

<script>
export default {
  name: 'TodoFooter',

props:{
 list:{
          type:Array,
           required:true
  }
},
  data() {
    return {
      type:'all' 
    }
    },

  methods: {
    hClear(){
      //传递数据
      this.$emit('clearDone');
    }
  },
  // 计算属性
  computed:{
    leftCount(){

      return this.list.length
    },
    
showClear(){
return this.list.some(item=>item.isDone)
},

}
}
</script>

<style lang="scss" scoped>

</style>